<template>
  <view class="page">
    <view class="header">
      <image class="logo" :src="getShowNginxPicUrl('6kGU6QA0M8A3xBeHKUhp.png')" mode="widthFix"></image>
    </view>
    <view class="content">
      <!--			轮播图-->
      <view class="banner-container">
        <banner :position="7" height="200rpx"></banner>
      </view>
      <!--			我的自习-->
      <view class="block">
        <view class="header">
          <view class="title">我的自习</view>
          <view class="view-more-btn" @click="() => $uni.navigateTo({ url: '/mine/pages/learningLog/index' })">
            <text>学习日志 &gt;</text>
          </view>
        </view>
        <view class="content">
          <!--					自习室 / 排行榜-->
          <view class="tab-list">
            <view class="tab-item" v-for="item in tabList" :key="item" :class="{ active: currentSelectTab === item }"
              @click="() => (currentSelectTab = item)">{{ item }}</view>
          </view>
          <!--					自习室-->
          <view class="tab-page" v-if="currentSelectTab === '自习室'">
            <image :src="getShowNginxPicUrl('LB7JN8vBeEa3WmYwoLhb.png')" mode="widthFix" class="image"
              @click="() => $uni.navigateTo({ url: '/studyRoom/pages/studyRoomList/index' })"></image>
          </view>
          <!--					排行榜-->
          <view class="tab-page" v-else-if="currentSelectTab === '排行榜'">
            <image :src="getShowNginxPicUrl('cppD8Tr9rJrdvKsAyy2p.png')" mode="widthFix" class="image"
              @click="() => $uni.navigateTo({ url: '/studyRoom/pages/rank/index' })"></image>
          </view>
        </view>
      </view>
      <!--			督学打卡活动-->
      <view class="block">
        <view class="header">
          <view class="title">督学打卡活动</view>
          <view class="view-more-btn" @click="() => $uni.navigateTo({ url: '/studyRoom/pages/activity/list' })">
            <text>查看更多 &gt;</text>
          </view>
        </view>
        <view class="content">
          <image :src="getShowNginxPicUrl('rPUZEJd421CDHm5JYVmw.png')" mode="widthFix" class="banner"
            @click="() => $uni.navigateTo({ url: '/studyRoom/pages/activity/list' })"></image>
          <!--					活动列表（只取前面3个）-->
          <view class="activity-list">
            <view class="activity-item" v-for="item in activityList" :key="item.studyActivityId" @click="() =>
        $uni.navigateTo({
          url: handleUrlParams('/studyRoom/pages/activity/detail', {
            studyActivityId: item.studyActivityId,
          }),
        })
        ">
              <!--							活动图片-->
              <image :src="getShowImage(item.activityLogo)" class="activity-logo" v-if="item.activityLogo"></image>
              <!--							活动名称-->
              <view class="activity-name">{{ item.activityName }}</view>
              <!--							活动时长-->
              <view class="activity-duration">
                <image :src="rightIcon" class="icon"></image>
                <view>{{ getActivityDuration(item) }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request"
import { getShowNginxPicUrl } from "@/utils/settings"
import banner from "@/components/banner.vue"
import { getShowImage, handleUrlParams } from "@/utils"
import rightIcon from "./assets/right.png"
import dateUtils from "@/utils/dateUtils"
import moment from "@/lib/moment.min"

export default {
  components: { banner },
  data() {
    return {
      tabList: ["自习室", "排行榜"],
      currentSelectTab: "自习室",
      activityList: [], //活动列表
      rightIcon,
      moment,
    }
  },
  methods: {
    handleUrlParams,
    getShowImage,
    getShowNginxPicUrl,
    //获取活动持续时长
    getActivityDuration(item) {
      const durationObj = dateUtils.moment.calculateDateInterval(moment(item.startTime), moment(item.endTime))
      if (durationObj.y > 0) {
        return durationObj.y + "年"
      } else if (durationObj.m > 0) {
        return durationObj.m + "月"
      } else if (durationObj.w > 0) {
        return durationObj.w + "周"
      } else if (durationObj.d > 0) {
        return durationObj.d + "天"
      }
    },
  },
  onLoad() {
    //获取前3个活动
    request({
      url: "studyActivity/getActivityPage",
      data: {
        current: 1,
        size: 3,
      },
      showLoading: true,
      errorHandle: true,
    }).then((data) => {
      this.activityList = data.records
    })
  },
}
</script>

<style lang="scss" scoped>
.page {
  padding-bottom: 50rpx;

  > .header {
    > .logo {
      width: 350rpx;
    }
  }

  > .content {
    padding: 0 30rpx;

    > .banner-container {
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      overflow: hidden;
    }

    > .block {
      margin-top: 70rpx;

      > .header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        > .title {
          font-size: 34rpx;
          font-weight: bold;
        }

        > .view-more-btn {
          font-size: 30rpx;
          color: #999999;
        }
      }

      > .content {
        margin-top: 30rpx;

        > .tab-list {
          display: flex;

          > .tab-item {
            margin-right: 24rpx;
            padding: 6rpx 40rpx;
            font-size: 30rpx;
            background: #d7eee7;
            border-radius: 26rpx;
            color: #2cb980;

            &.active {
              background: white;
              border: 3rpx solid #2cb980;
            }
          }
        }

        > .tab-page {
          margin-top: 30rpx;

          > .image {
            border-radius: 20rpx;
            width: 100%;
          }
        }

        > .banner {
          border-radius: 30rpx;
          width: 100%;
        }

        > .activity-list {
          display: flex;
          margin-top: 30rpx;

          > .activity-item {
            width: 0;
            flex: 1;
            background: #f4f5f7;
            padding: 20rpx 10rpx;
            border-radius: 30rpx;

            &:not(:last-child) {
              margin-right: 50rpx;
            }

            > .activity-logo {
              width: 170rpx;
              height: 109.6rpx;
            }

            > .activity-name {
              margin-top: 20rpx;
              font-size: 30rpx;
              //文本溢出加省略号
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            > .activity-duration {
              margin-top: 10rpx;
              color: #b1581e;
              font-size: 30rpx;
              display: flex;
              align-items: center;

              > .icon {
                width: 13rpx;
                height: 13rpx;
                margin-right: 40rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>
